<template>
  <div>
    <Form :model="search" :label-width="70">
      <Row :gutter="16">
        <i-col span="6">
          <FormItem label="订单编号" prop="orderNumber">
            <Input v-model="orderNumber" placeholder="根据订单编号检索" @on-enter="searchByInfo"/>
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="收货人" prop="consigneeName">
            <Input v-model="search.consigneeName" placeholder="根据收货人检索"  @on-enter="searchByInfo"/>
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="联系方式" prop="consigneePhone">
            <Input v-model="search.consigneePhone" placeholder="根据联系方式检索"  @on-enter="searchByInfo"/>
          </FormItem>
        </i-col>
        <i-col span="6">
          <Button type="primary" @click="searchByInfo">查询</Button>
        </i-col>
      </Row>
      <Row :gutter="16">
        <i-col span="6">
          <FormItem label="订单状态" prop="orderStatus">
            <Select v-model="searchOrderStatus" @on-change="statusChange" placeholder="根据订单状态检索">
              <Option v-for="(status, index) in orderStatus" :key="index" :value="index + 1">{{status}}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="订单来源" prop="orderType">
            <Select v-model="search.orderType" @on-change="typeChange" placeholder="根据订单来源检索" clearable>
              <Option value="1">公众号</Option>
              <Option value="2">分销商</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="日期查询">
            <DatePicker @on-change="dateChange" type="daterange" :options="dateOptions" placement="bottom-start" placeholder="根据日期查询"/>
          </FormItem>
        </i-col>
      </Row>
    </Form>
    <div>
      <span>当前查询条件：</span>
      <Tag :closable="true" color="blue" v-for="(t, index) in nowBy" :key="index" @on-close="tagClose(t, index)">{{ searchBy[t] }}</Tag>
    </div>
  </div>
</template>

<script>
export default {
  name: 'order-search',
  data () {
    return {
      search: {
        consigneeName: '',
        consigneePhone: '',
        orderType: null,
        beginTime: 0,
        endTime: 0
      },
      searchOrderStatus: null,
      orderNumber: '',
      orderStatus: ['未付款', '已付款(未发货)', '已发货', '交易成功'],
      dateOptions: {
        shortcuts: [
          {
            text: '两天内',
            value () {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 2)
              return [start, end]
            }
          },
          {
            text: '一周内',
            value () {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              return [start, end]
            }
          },
          {
            text: '一个月内',
            value () {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              return [start, end]
            }
          }
        ]
      },
      searchBy: ['收货人', '联系方式', '订单来源', '下单日期', '订单状态', '订单编号'],
      nowBy: []
    }
  },
  methods: {
    getParams () {
      this.nowBy = []
      let params = {}
      let index = 0
      for (let i in this.search) {
        if (this.search[i]) {
          this.nowBy.push(index)
          params[i] = this.search[i]
        }
        index++
      }
      if (this.nowBy.indexOf(4) !== -1) {
        this.nowBy.splice(this.nowBy.indexOf(4), 1)
      }
      return params
    },
    dateChange (date) {
      this.search.beginTime = new Date(date[0]).valueOf() - 8 * 3600 * 1000
      this.search.endTime = new Date(date[1]).valueOf() + 16 * 3600 * 1000 - 1
      let params = this.getParams()
      this.$emit('dateChange', params)
    },
    statusChange (val) {
      this.$emit('statusChange', val)
      this.nowBy = [4]
    },
    typeChange (val) {
      let params = this.getParams()
      this.$emit('searchByInfo', params)
    },
    searchByInfo () {
      if (this.orderNumber) {
        this.$emit('searchByInfo', {orderNumber: this.orderNumber})
        this.nowBy = [5]
      } else {
        let params = this.getParams()
        this.$emit('searchByInfo', params)
      }
    },
    tagClose (item, index) {
      this.nowBy.splice(index, 1)
      if (item === 4 || item === 5) {
        this.$emit('getAllOrder')
        this.orderNumber = ''
      } else if (this.nowBy[0] === undefined) {
        this.$emit('getAllOrder')
      } else {
        this.setParams()
        let params = this.getParams()
        this.$emit('searchByInfo', params)
      }
    },
    setParams () {
      let index = 0
      for (let i in this.search) {
        if (this.nowBy.indexOf(index) === -1) {
          this.search[i] = null
        }
        index++
      }
    }
  },
  created () {}
}
</script>

<style scoped>

</style>
